<template>
  <div
    class="relative flex flex-1 flex-col items-center overflow-hidden bg-cover pb-[178px] pt-[30px] shadow-[0_0_5px_0_rgba(151,152,155,0.17)]"
    :style="{ backgroundImage: `url(${imageUrl})` }"
  >
    <div class="text-center text-[20px] text-[#000]">
      {{ mainTitle }}
    </div>
    <div class="text-center text-[20px] text-[#000]">
      {{ subTitle }}
    </div>
    <div class="mt-[42px] px-[38px] text-center text-[16px] leading-[24px] text-[#000]">
      {{ description }}
    </div>
    <div class="absolute bottom-[54px] text-center text-[16px] text-[#FF6B01]">查看详情</div>
  </div>
</template>

<script lang="ts" setup>
defineProps<{
  /** 主标题 */
  mainTitle: string
  /** 子标题 */
  subTitle: string
  /** 描述 */
  description: string
  /** 图片 URL */
  imageUrl: string
}>()
</script>
